<template>
    <div>
        <van-row>
            <van-col span="8" class="active">span: 8</van-col>
            <van-col span="8" class="active">span: 8</van-col>
            <van-col span="8" class="active">span: 8</van-col>
        </van-row>

        <van-row>
            <van-col span="12" class="active">
                <div style="margin-left: 20px;margin-right: 10px;background-color: green;">
                    span: 6
                </div>
            </van-col>
            <van-col span="12" class="active">
                <div style="margin-left: 10px;margin-right: 20px;background-color: green;">
                    span: 6
                </div>
            </van-col>
            <van-col span="12" class="active">span: 6</van-col>
            <van-col span="12" class="active">span: 6</van-col>
            <van-col span="12" class="active">span: 6</van-col>
            <van-col span="12" class="active">span: 6</van-col>
            <van-col span="12" class="active">span: 6</van-col>
        </van-row>

        <van-button type="default" v-on:click="buttonClick">点我</van-button>
        <!-- 每个元素的两侧间隔相等 -->
        <van-row type="flex" justify="space-around" class="item">
            <van-col span="7" class="green">span: 6</van-col>
            <van-col span="7" class="green">span: 6</van-col>
            <van-col span="7" class="green">span: 6</van-col>
            <van-col span="7" class="green">span: 6</van-col>
            <van-col span="7" class="green">span: 6</van-col>
            <van-col span="7" class="green">span: 6</van-col>
        </van-row>

        <van-tabs v-model="active" @click="tabsClick">
            <van-tab title="标签 1">
                <van-row type="flex" justify="space-around" class="item">
                    <van-col span="7" class="green">span: 6</van-col>
                    <van-col span="7" class="green">span: 6</van-col>
                    <van-col span="7" class="green">span: 6</van-col>
                    <van-col span="7" class="green">span: 6</van-col>
                    <van-col span="7" class="green">span: 6</van-col>
                    <van-col span="7" class="green">span: 6</van-col>
                </van-row>
            </van-tab>
            <van-tab title="标签 2">
                <van-row>
                    <van-col span="12" class="active">
                        <div style="margin-left: 20px;margin-right: 10px;background-color: green;">
                            span: 6
                        </div>
                    </van-col>
                    <van-col span="12" class="active">
                        <div style="margin-left: 10px;margin-right: 20px;background-color: green;">
                            span: 6
                        </div>
                    </van-col>
                    <van-col span="12" class="active">span: 6</van-col>
                    <van-col span="12" class="active">span: 6</van-col>
                    <van-col span="12" class="active">span: 6</van-col>
                    <van-col span="12" class="active">span: 6</van-col>
                    <van-col span="12" class="active">span: 6</van-col>
                </van-row>
            </van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
            <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>

    </div>
</template>

<script>

  import Vue from 'vue'
  import {Row,Col} from 'vant'
  import {Toast} from 'vant'
  import { Button } from 'vant'
  import { Tab, Tabs } from 'vant';

  Vue.use(Row).use(Col).use(Toast).use(Button).use(Tab).use(Tabs)


  export default {
    name: "Category",
    data:function(){

        return {

            toast:null,
            active:2
        }
    },
    created:function(){

        // console.log(Row.name);
    },
     methods:{

        buttonClick(){

           this.toast = Toast.loading({
                duration:0,
                message:'加载中...',
                forbidClick:true
            })
        },
         tabsClick(index,title){

             console.log(index+ ":" + title);

         }
     },
    comments:{
        [Row.name]:Row,
        [Col.name]:Col,
        [Button.name]:Button,
        [Tab.name]:Tab,
        [Tabs.name]:Tabs
    }
  }
</script>

<style scoped>

    .active{
        /*background-color: red;*/
        height: 100px;
        /*width: 40%;*/
        line-height: 100px;
        text-align: center;
    }

    .green{
        background-color: green;
    }

    .item{

        flex-wrap: wrap;
    }

</style>
